<template>
	<view class="content">
		<carHeader :title="'专业洗车'"></carHeader>

		<!-- 搜索框 -->
		<view class="search">
			<input v-model="merchantName" type="text" placeholder="输入需要搜索的店铺" placeholder-style="color:#C7C7C7;" />
			<span @click="check">
			<image src="../../static/车联网服务-03车辆维修-02附近门店_slices/搜索@2x.png" mode="heightFix"></image>
			</span>
		</view>

		<!-- 洗车店铺 -->
		<view class="wash">
			<view class="wash-one" v-for="(item,index) in carList" :key="index" @click="checkDetail(item.merchantId)">
				<!-- 名称 + 评分 -->
				<view class="one-up">
					<!-- 名称 + 评级 -->
					<view>
						<text style="font-size: 36rpx;">{{item.merchantName}}</text>
						<view class="one-up-left">
							<view v-for="(item,index) in item.rate" :key="index">
								<image src="../../static/车联网服务-01专业洗车1slices/五星@2x.png" mode="widthFix"></image>
							</view><view style="margin-left: 10rpx; font-size: 26rpx;">{{item.rate=== null ? 0 : item.rate}}分</view>
							<text  style="margin-left: 30rpx; font-size: 26rpx;">销量：{{item.count=== null ? 0 : item.count}}</text>
						</view>
					</view>
					<!-- 距离 -->
					<view>556m</view>
				</view>
				<!-- 图片 + 介绍 -->
				<view class="one-down">
					<!-- 图片 -->
					<image :src="item.img" mode="heightFix"></image>
					<!-- 介绍 -->
					<view class="one-down-introduce">
						<view>营业时间：{{item.startTime.substring(10,16)}}~{{item.endTime.substring(10,16)}}</view>
						<view>{{item.startTime.substring(0,10)}}~{{item.endTime.substring(0,10)}}</view>
						<view>{{item.city}}{{item.district}}{{item.address}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantName:null,
				olderList: ['飞飞汽车美容店', '飞飞汽车美容店', '飞飞汽车美容店', '飞飞汽车美容店', '飞飞汽车美容店', '飞飞汽车美容店', '飞飞汽车美容店', '飞飞汽车美容店',
					'飞飞汽车美容店'
				], //历史记录list
				carList: [{
					count:0
				}], //洗车店列表

			};
		},

		onLoad() {
			const that = this;
			uni.request({
				url:"http://localhost:8080/carUser/getMerchant",
				method:"GET",
				success(res) {
					console.log(res);
					that.carList = res.data.data;
				},
				fail() {
					console.log("失败了");
				}
			})
		},
		methods: {
			checkDetail(res){
				console.log(res);
				console.log("该跳转了哦");
				// 当前页面的代码
				const data = { merchantId: res };
				const queryString = Object.keys(data)
				  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
				  .join('&');
				 
				uni.navigateTo({
				  url: `/pages/carWash/carWash?${queryString}`
				});
			},
			
			check(){
				const that = this;
				console.log("搜索");
				console.log(this.merchantName);
				uni.request({
					url:"http://localhost:8080/carUser/getMerchant",
					method:"GET",
					data:{
						merchantName:this.merchantName
					},
					success(res) {
						console.log(res);
						that.carList = res.data.data;
					},
					fail() {
						console.log("失败了");
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
	}

	.search {
		z-index: 5;
		width: 90%;
		// height: 400rpx;
		margin: 0 5%;
		// padding: 4rpx 0;
		background-color: #F7F7F7;
		border-radius: 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: absolute;
		top: 100rpx;

		input {
			width: 100%;
			// background-color: #87cefa;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 50rpx;
			padding-left: 30rpx;
			font-size: 26rpx;
		}

		image {
			z-index: 5;
			height: 35rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
		}
	}

	.older {
		// background-color: palegoldenrod;
		position: relative;
		width: 90%;
		height: 85rpx;
		overflow: hidden;
		margin: 0 auto;
		top: -160rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: row; //文字横向排列
		flex-wrap: wrap; //自动换行

		view,
		text {
			color: #F7F9FE;
		}

		view {
			font-size: 28rpx;
		}

		text {
			font-size: 22rpx;
		}
	}

	.wash {
		width: 100%;
		// background-color: palegoldenrod;
		position: relative;
		top: -150rpx;

		.wash-one {
			width: 94%;
			margin: 0 3%;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
				padding-top: 30rpx;

			.one-up {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 0 20rpx;
				// background-color: #ff557f;
				// padding-top: 20rpx;

				// margin-top: 20rpx;
				.one-up-left {
					width: 100%;
					// background-color: #87cefa;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
				}

				image {
					width: 20rpx;
					margin-left: 5rpx;
				}

				text {
					margin-left: 5rpx;
				}
			}

			.one-down {
				width: 100%;
				// height: 180rpx;
				// background-color: #0055ff;
				border-radius: 30rpx;
				display: flex;
				padding-bottom: 30rpx;
				

				image {
					height: 150rpx;
					border-radius: 20rpx;
					// background-color: #00ffff;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	.one-down-introduce{
		margin-top: 20rpx;
		margin-left: 20rpx;
		view{
			margin-bottom: 5rpx;
		}
	}
</style>